import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //定义表单
  // final _formKey = GlobalKey<FormState>();
  String account = '';
  String nickname = '';
  String birthday = '';
  String location = '';
  String occupation = '';

  void _updateAccount(String value) {
    setState(() {
      account = value;
    });
  }

  void _updateNickname(String value) {
    setState(() {
      nickname = value;
    });
  }

  void _updateBirthday(String value) {
    setState(() {
      birthday = value;
    });
  }

  void _updateLocation(String value) {
    setState(() {
      location = value;
    });
  }

  void _updateOccupation(String value) {
    setState(() {
      occupation = value;
    });
  }

  //点击确定按钮 弹框展示当前表单数据
  void _showFormData() {
    // print('账号: $account\n昵称: $nickname\n生日: $birthday\n所在地: $location\n职业: $occupation');
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('表单数据'),
          content: Text(
              '账号: $account\n昵称: $nickname\n生日: $birthday\n所在地: $location\n职业: $occupation'),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            backgroundColor: Colors.white,
            body: Column(
              children: [
                const MyHeader(),
                const MyAvatar(),
                MyCell(
                    label: '账号',
                    placeholder: '请输入账号',
                    value: account,
                    onChanged: _updateAccount),
                MyCell(
                    label: '昵称',
                    placeholder: '请输入昵称',
                    value: nickname,
                    onChanged: _updateNickname),
                const MyGenderCell(),
                MyCell(
                    label: '生日',
                    placeholder: '请输入日期',
                    value: birthday,
                    onChanged: _updateBirthday),
                MyCell(
                    label: '所在地',
                    placeholder: '请选择所在地',
                    value: location,
                    onChanged: _updateLocation),
                MyCell(
                    label: '职业',
                    placeholder: '请选择职业',
                    value: occupation,
                    onChanged: _updateOccupation),
                GestureDetector(
                  onTap: _showFormData,
                  child: const MyConfirmButton(),
                ),
              ],
            )));
  }
}

//头部导航栏 返回 标题 更多
class MyHeader extends StatelessWidget {
  const MyHeader({super.key});

  void _onBack() {
    // Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 50,
        color: Colors.white,
        padding: const EdgeInsets.all(10),
        child: const Expanded(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Icon(Icons.arrow_back),
              Text('标题', style: TextStyle(fontSize: 18)),
              Icon(Icons.more_vert),
            ],
          ),
        ));
  }
}

//头像组件
class MyAvatar extends StatelessWidget {
  const MyAvatar({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Container(
        margin: const EdgeInsets.fromLTRB(0, 50, 0, 20),
        width: 110,
        height: 110,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(55),
          border: Border.all(color: Colors.grey, width: 2),
        ),
        child: ClipOval(
          child: Image.network(
              'https://book.flutterchina.club/assets/img/logo.png',
              fit: BoxFit.cover),
        ),
      ),
      Container(
        margin: const EdgeInsets.fromLTRB(0, 0, 0, 40),
        child: const Text('修改头像',
            style: TextStyle(
                fontSize: 18, color: Color.fromARGB(255, 238, 132, 86))),
      ),
    ]);
  }
}

//通用的cell组件,左侧30%是label,右侧为表单
class MyCell extends StatefulWidget {
  const MyCell(
      {super.key,
      required this.label,
      required this.placeholder,
      required this.value,
      required this.onChanged});
  final String label;
  final String placeholder;
  final String value;

  final Function(String) onChanged;

  @override
  State<MyCell> createState() => _MyCellState();
}

class _MyCellState extends State<MyCell> {
  late String currentValue;

  @override
  void initState() {
    super.initState();
    currentValue = widget.value;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      padding: const EdgeInsets.fromLTRB(0, 16, 0, 16),
      margin: const EdgeInsets.fromLTRB(16, 0, 16, 0),
      decoration: const BoxDecoration(
        color: Colors.white,
        border: Border(
            bottom: BorderSide(
                color: Color.fromARGB(255, 219, 219, 219), width: 1)),
      ),
      child: Row(children: [
        Expanded(
          flex: 3,
          child: Text(widget.label, style: const TextStyle(fontSize: 16)),
        ),
        Expanded(
            flex: 7,
            child: Transform.translate(
              offset: const Offset(0, -5.5),
              child: TextField(
                decoration: InputDecoration(
                  hintText: widget.placeholder,
                  border: InputBorder.none, // 去除下划线
                  hintStyle: const TextStyle(color: Colors.grey), // 提示文本为灰色
                ),
                onChanged: (value) {
                  // setState(() {
                  //   currentValue = value;
                  // });
                  widget.onChanged(value);
                },
              ),
            ))
      ]),
    );
  }
}

//独立的性别选择cell
class MyGenderCell extends StatefulWidget {
  const MyGenderCell({super.key});

  @override
  State<MyGenderCell> createState() => _MyGenderCellState();
}

class _MyGenderCellState extends State<MyGenderCell> {
  bool isMale = true;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 60,
      padding: const EdgeInsets.fromLTRB(0, 16, 0, 16),
      margin: const EdgeInsets.fromLTRB(16, 0, 16, 0),
      decoration: const BoxDecoration(
        color: Colors.white,
        border: Border(
            bottom: BorderSide(
                color: Color.fromARGB(255, 219, 219, 219), width: 1)),
      ),
      child: Row(children: [
        const Expanded(
          flex: 3,
          child: Text('性别', style: TextStyle(fontSize: 16)),
        ),
        Expanded(
          flex: 7,
          child: Row(children: [
            Checkbox(
                value: isMale,
                onChanged: (value) {
                  setState(() {
                    isMale = !isMale;
                  });
                }),
            Container(
              margin: const EdgeInsets.fromLTRB(10, 0, 25, 0),
              child: const Text('男', style: TextStyle(fontSize: 16)),
            ),
            Checkbox(
                value: !isMale,
                onChanged: (value) {
                  setState(() {
                    isMale = !isMale;
                  });
                }),
            Container(
              margin: const EdgeInsets.fromLTRB(10, 0, 0, 0),
              child: const Text('女', style: TextStyle(fontSize: 16)),
            ),
          ]),
        )
      ]),
    );
  }
}

//确认按钮
class MyConfirmButton extends StatelessWidget {
  const MyConfirmButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 50,
      margin: const EdgeInsets.fromLTRB(16, 14, 16, 14),
      child: ElevatedButton(
        onPressed: () {
          // 在这里直接定义按钮点击时的行为
        },
        style: ElevatedButton.styleFrom(
          minimumSize: const Size(double.infinity, 50),
          backgroundColor: const Color.fromARGB(255, 24, 24, 24),
        ),
        child: const Text('确认',
            style: TextStyle(fontSize: 16, color: Colors.white)),
      ),
    );
  }
}
